<%--
  Created by IntelliJ IDEA.
  User: qian
  Date: 2024/6/13
  Time: 23:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>

    <script src="https://cdn.staticfile.org/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>

    <title>开通超级VIP</title>

    <link href="../../img/vip.png" rel="shortcut icon" type="image/png" />


    <style type="text/css">
    *{
        margin:0px;
        padding:0px;
    }
    /* 触发弹窗图片的样式 */
    .myImg {
        margin: 10px;
        border-radius: 20px;
        cursor: pointer;
        float: left;
        max-height: 130px;
    }

    /* 弹窗的位置和背景颜色 */
    .modal {
        display: none;
        position: fixed; /* 绝对定位 */
        z-index: 1; /* 元素置前 */
        padding-top: 50px;
        width: 100%;
        height: 100%;
        overflow: auto; /* 溢出出现滚动条 */
    }

    /* 弹窗图片的大小 */
    .content {
        margin: auto;
        display: block;
        min-height:500px;
        max-height:600px;
    }

    a{
        text-decoration: none;
        color: yellowgreen;
    }
    a:hover{
        color: orange;
        font-size: 50px;
    }
</style>

</head>

<body>
<h1>一个月 --> 20$</h1>

<a href="../success.jsp">返回主页</a>


<div>
    <!-- 图片 -->
    <img loading="lazy" id="Img1" class="myImg" src="../../img/payment.png" onclick="demo('Img1')">
    <!-- 弹窗 -->
    <div id="myModal" class="modal" onclick="document.getElementById('myModal').style.display='none'">
        <!-- 弹窗内容 -->
        <img class="content" id="img01">
    </div>
    <!--相应图片点击操作-->
    <script>
        function demo(imgId) {
            document.getElementById('myModal').style.display = "block";
            document.getElementById("img01").src = document.getElementById(imgId).src;
        }



    </script>
</div>

</body>
</html>
